<template>
	<view class="body">
		<view class="returnBox">
			<return-text text="商品发布"></return-text>
		</view>
		<view class="box">
			<!-- 标题 -->
			<view>
				<input type="text" v-model="articleTitle" placeholder="输入一个醒目的标题~" maxlength="40" />
			</view>
			<!-- 文章内容 -->
			<view class="content">
				<textarea class="JTxtArea lg" v-model="articleContent" :data-maxnum="articleContent.length+'/500'"
					@input="inputReason" placeholder="尽量描述一下自己的宝贝~" maxlength="500" :maxlength="500" />
			</view>
			<view class="wenben"> 默认第一张为主图哦~ </view>
			<!-- 图片区域 -->
			<uploadImg :objUser="objUser" @imgRegion="showOverlay" @imgpath="upImgPath" />
			<!-- 选择标签区域 -->
			<view class="huati"> 添加话题 </view>
			<view class="uplabel">
				<view :class="isActive===index? 'clazx' : 'uplabel_text'" v-for="(item,index) in label"
					:key="item.familyId" @click="selectLabel(item.familyId,index)">
					{{item.familyName}}

				</view>

			</view>
			<!-- 发布按钮！ -->
			<view class="release">
				<view class="xxx">
					商品金额
				</view>
				<!-- 金额输入框 -->
				<view class="moneyInoput">

					<input placeholder-style="color:#3FD3D1" class="ipt" type="digit" placeholder="￥ 00000.00"
						maxlength="6" @input="testMoney" v-model="money" />
				</view>

			</view>
			<view class="release_button" @click="releaseButton">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadImg
	} from '../../components/uploadImg/uploadImg.vue'
	export default {
		components: {
			uploadImg //注册子组件
		},
		data() {
			return {
				// 图片展示
				imgRegion: [],
				// 文章标题
				articleTitle: "",
				// 文章内容
				articleContent: "",
				// 标签
				label: [],
				isActive: '',
				// 标签ID
				familyId: '',
				imgpath: [],
				money: '',
				objUser: ''
			};
		},
		onLoad() {
			this.chauxn()
		},
		created() {
			// 拿到用户信息
			try {
				const value = uni.getStorageSync('userObj');
				this.objUser = value.token
			} catch (e) {}
		},
		methods: {
			showOverlay(imgRegion) {
				console.log(imgRegion)
				this.imgRegion = imgRegion
			},
			upImgPath(e) {
				console.log(e)
				this.imgpath = e
			},

			testMoney(e) {
				let that = this;
				let price = e.detail.value
				if (price.indexOf(".") == 0) {
					//'首位小数点情况'
					price = price.replace(/[^$#$]/g, "0.");
					price = price.replace(/\.{2,}/g, ".");
				}
				price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				//重新赋值给input
				this.$nextTick(() => {
					this.money = price;
				});

			},
			// 查询标签
			async chauxn() {
				const {
					data: res
				} = await uni.$http.get(`/ym_server/IntactGoods/family`)
				this.label = res.data.list
			},
			// 选择标签
			selectLabel(a, index) {
				console.log(index)
				this.isActive = index
				// 传入标签id
				this.familyId = a
			},
			inputReason(e) {
				this.reason = e.detail.value;
			},

			// 添加文章
			releaseButton() {
				console.log("点击发布")
				console.log(this.imgpath.length)
				console.log("jiage" + this.money)
				if (this.articleTitle == '' || this.articleContent == '') {
					uni.showToast({
						title: '描述不能为空',
						icon: 'none',
						duration: 2000
					});
				} else if (this.imgpath.length == 0) {
					uni.showToast({
						title: '图片不能为空',
						icon: 'none',
						duration: 2000
					});
				} else if (this.familyId == '') {
					uni.showToast({
						title: '请选择发布标签',
						icon: 'none',
						duration: 2000
					});
				} else if (this.money == '' || this.money == null) {
					uni.showToast({
						title: '请输入商品价格',
						icon: 'none',
						duration: 2000
					});
				} else {
					console.log("安全发布")
					// 在此处上传图片
					uni.uploadFile({
						url: '/ym_server/IntactArticle', //接口地址
						name: 'file',
						formData: {
							// 参数
							"imageLink": this.imgpath
						},
						success: (uploadFileRes) => {
							console.log("返回结果：" + uploadFileRes.data);
						}
					});
					// 上传end
					uni.$http.post('/ym_server/IntactGoods', {
						"familyId": this.familyId, //分类id
						"title": this.articleTitle, //标题
						"content": this.articleContent, //内容
						"imageLink": this.imgpath, //图片链接
						"price": this.money //价格
					}).then((res) => {
						console.log(res)
						console.log(res.data.code)
						if (res.data.code === 200) {
							this.familyId = '',
								this.articleTitle = '',
								this.articleContent = ''
							uni.switchTab({
								url: '../../pages/used/used'
							})
							setTimeout(function() {
								uni.showToast({
									title: '物品发布成功',
									duration: 2000
								})
							}, 2000)
						} else {
							console.log("文章发布失败")
						}
					})
					console.log("上传完毕！")
				}

			},

		},
	}
</script>

<style lang="scss">
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	.returnBox {
		position: sticky;
		background-color: #ffffff;
		padding-bottom: 40upx;
		z-index: 999;
		top: 0px;
		left: 0px
	}

	body {
		height: 100vh;
		background-color: #fff;
	}

	.box {
		font-family: "黑体";
		background-color: #FFFFFF;
		padding: 0 40upx;

		input {
			width: 100%;
			height: 100upx;
			background-color: #FFFFFF;
			font-size: 40upx;
		}

		.content {
			border-top: 2upx solid #AEAEAE;
			background-color: #FFFFFF;
			font-size: 32upx;
			padding-top: 20upx;

			.JTxtArea {
				border-radius: 5px;
				width: calc(100% - 16px);
				padding: 16upx 16upx 40upx 16upx;
				min-height: 120upx;
				line-height: 40upx;
				color: #000000;
				position: relative;
				height: 400upx;
				border-bottom: #AEAEAE solid 2upx;

				&:after {
					content: attr(data-maxnum);
					position: absolute;
					right: 10upx;
					bottom: 0upx;
					font-size: 28upx;
					color: gray;
				}
			}

			image {
				width: 100%;
			}
		}


		.wenben {
			color: #AEAEAE;
			font-size: 26upx;
			width: 100%;
			margin-top: 20upx;
		}

		.huati {
			font-size: 34upx;
			width: 100%;
			margin-top: 20upx;
			font-weight: bold;
		}

		.uplabel {
			width: 100%;
			margin-bottom: 50upx;
			min-height: 100upx;
			font-size: 24upx;
			color: #FFFFFF;

			.uplabel_text {
				margin-top: 30upx;
				float: left;
				margin-right: 20upx;
				background-color: #cccccc;
				max-width: 140upx;
				border-radius: 32upx;
				text-align: center;
				padding: 8upx 12upx;
				width: 160upx;
				height: 44upx;
				line-height: 44upx;
			}

			.clazx {
				margin-top: 30upx;
				float: left;
				margin-right: 20upx;
				background-color: #3FD3D1;
				max-width: 140upx;
				border-radius: 32upx;
				text-align: center;
				padding: 8upx 12upx;
				width: 160upx;
				height: 44upx;
				line-height: 44upx;
			}
		}

		.release {
			width: 100%;
			height: 200upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.xxx {
				font-size: 34upx;
				font-weight: bold;
			}

			.moneyInoput {
				max-width: 230upx;
				height: 62upx;
				color: #3FD3D1;
				margin-right: 30upx;

				input {
					border-radius: 46upx;
					background-color: #F6F6F6;
					min-width: 180upx;
					max-width: 230upx;
					height: 64upx;
					line-height: 64upx;
					color: #3FD3D1;
					font-size: 32upx;
					padding: 0upx 10upx;
					text-align: center;
				}
			}


		}

		.release_button {
			background-color: #3fd3d1;
			color: #FFFFFF;
			width: 95%;
			height: 110upx;
			line-height: 120upx;
			border-radius: 16upx;
			font-size: 36upx;
			text-align: center;
			margin: 10upx auto;
		}
	}
</style>
